<template>
<div class="login-box" >
  <el-form v-if="!isSystemUpdate" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="auto" >
    <el-form-item label="输入手机号前7位" prop="phone"  >
      <el-input type="number" v-model="ruleForm.phone" autocomplete="off" max-length="7"></el-input>
    </el-form-item>

    <el-form-item >
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
  <div v-if="isSystemUpdate" style="font-size: 20px">网站维护中，请改日再来。感谢支持!</div>
</div>
</template>
<script>
  export default {
    data() {
      var validatePhone = (rule, value, callback) => {
        if (!/^\d{7}$/.test(value)) {
          callback(new Error('请输入手机号前7位'));
        } else {
          callback();
        }
      };
      return {
        isSystemUpdate: false,
        ruleForm: {
          phone: ''
        },
        rules: {
          phone: [
            { validator: validatePhone, trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
      var that = this;
      this.$api.config.get().then(function(res) {
        if (res.data.isSystemUpdate && res.data.isSystemUpdate == 1) {
          that.isSystemUpdate = true;
        }
      });
    },
    methods: {
      submitForm(formName) {
        var that = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            that.$api.user.login({phone: that.ruleForm.phone})
              .then(function(response) {
                that.$store.state.peopleId = response.data.id;
                that.$router.push("/notice");
              });
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>

  .login-box {
    font-size: 39px;
    vertical-align: middle;
    border: 1px solid #DCDFE6;
    width: 400px;
    height: auto;
    margin: 200px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  /*.el-form-item__label {*/
  /*  font-size: 30px;*/
  /*}*/
  /*.el-form-item {*/
  /*  margin-top: 42px;*/
  /*  margin-bottom: 42px;*/
  /*}*/

  /*.el-button {*/
  /*  font-size: 30px;*/
  /*}*/
  /*.el-form-item__error {*/
  /*  font-size: 30px;*/
  /*}*/
  /*.el-input__inner {*/
  /*  font-size: 30px;*/
  /*  height: 50px;*/
  /*}*/
  /*.el-message-box__content {*/
  /*  font-size: 20px;*/
  /*}*/
</style>